<template>
  <a-form class="header-info m-form-box" :model="formState" :rules="formRules" ref="form">
    <a-form-item label="是否显示" name="">
      <a-switch v-model:checked="formState.show" />
    </a-form-item>
    <a-form-item label="头部标题" name="">
      <a-input v-model:value="formState.title" placeholder="" />
    </a-form-item>
    <a-form-item label="业务属性" name="props">
      <a-textarea :rows="4" v-model:value="formState.props" :placeholder="$getText('PH_CUSTOM_PROPS')" />
    </a-form-item>
  </a-form>
</template>

<script>
import { validatorJsonPromise } from '@/views/management/utils/validate'
/**
 * 页面配置 - 基础信息
 * @author 朱琦
 * @date   时间：2023/1/31
 */

const key = 'header'
const defaultForm = {
  title: '标题',
  show: true,
  props: null
}
export default {
  name: 'HeaderInfo',
  props: {},
  components: {},
  data() {
    return {
      formState: {},
      formRules: {
        props: [{ required: false, validator: validatorJsonPromise, trigger: 'blur' }]
      }
    }
  },
  computed: {},
  created() {},
  mounted() {},
  methods: {
    /**
     * 获取表单数据
     * @param {Object} form 表单数据
     */
    getForm(form) {
      form[key] = this.formState
    },
    /**
     * 设置表单数据
     * @param {Object} form 表单数据
     */
    setForm(form) {
      this.formState = { ...defaultForm, ...form[key] }
    }
  }
}
</script>

<style scoped lang="less">
@import url(../../../assets/styles/form.less);
.header-info {
  /deep/.ant-form-item-label {
    width: 5em;
  }
}
</style>
